<script>
export default {
  name: "index",
  data() {
    return {
      detail: {},
      news_id: ''
    }
  },
  onLoad({ id }) {
    this.news_id = id
    this.getDetail()
  },
  methods: {
    getDetail() {
      // 获取新闻详情
      this.$api.newsDetail({
        id: this.news_id
      }).then(res => {
        // 查找是否已经收藏
        this.detail = {
          ...res,
          image: res.image,
        }
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<template>
  <div>
    <div class="detail-image">
      <u-image :src="detail.image" :height="500" mode="aspectFit"></u-image>
    </div>

    <div style="padding: 0 20rpx">
      <u-parse :html="detail.content"></u-parse>
    </div>
  </div>
</template>

<style scoped lang="scss">
.detail-image {
  background-color: #ffffff;
}
.detail-box {
  padding: 20rpx;
  background-color: #ffffff;
}
.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
  margin-bottom: 10px;
}

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 10rpx 14rpx;
  border-radius: 50rpx;
  font-size: 24rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

.demo-price {
  font-size: 40rpx;
  color: #39b54a;
  margin-top: 5px;
}
.demo-count {
  font-size: 28rpx;
  color: $u-type-info;
  margin-top: 5px;
}

</style>
